<!--
@File    : 07_使用v-bind 绑定class.html
@Time    : 2019/6/5 16:51
@Author  : wangshunqing
@Email   : wangshunqing@yihuacomputer.com
@Software: WebStorm
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07_使用v-bind 绑定class</title>
    <script src="lib/vue@2.6.10.js"></script>
    <script src="./lib/vuex@3.1.1.js"></script>
    <script src="./lib/vue-router@3.0.6.js"></script>
</head>

<style>
    .box1{
        width: 300px;
        height: 40px;
        border: 2px solid orangered;
    }
    .box2{
        font-size: 30px;
        color: cornflowerblue;
    }
    .box3{
        background-color: goldenrod;

    }
</style>
<body>
<!--
  class
     1.  直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定;
     2.  在数组中使用表达式;
     3.  在数组中使用 对象来代替三元表达式，提高代码的可读性;
     4.  在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符
    代码演示
-->
<div id="app">
    <p class="box1 box2"> {{ message }}</p>
    <p :class="['box1','box2']"> {{ message }} </p>
    <p :class="['box1', 'box2', isShow?'box3':'']"> {{ message }} </p>
    <p :class="[{ box1: isShow}]"> {{ message }}</p>
    <p :class="classObj"> {{ message }}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue2.0 !',
            isShow : true,
            classObj :{'box1':true, 'box2':false, 'box3':true}
        }
    });
</script>
</html>